﻿<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="com.onlinevideo.service.impl.*" %>
<%@ page import="com.onlinevideo.entity.*" %>
<%
    Video video = (Video) request.getAttribute("video");
    List<VideoItem> videoItems = (List<VideoItem>) request.getAttribute("videoItems");
    if (videoItems == null || video == null) {
        return;
    }
    User loginUser = (User) session.getAttribute("user");
    if (videoItems.size() <= 0) {
        response.sendRedirect("../view/searchResult.jsp");
        return;
    }
    Integer count = (Integer) session.getAttribute("countX");
    if (count == null) {
        count = 0;
    }
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <div style="width: 1446px;border-radius: 30px;border: 1px solid #000000;height: 818px;background-color:#CCCCCC;position: absolute;z-index:-1;top: 74px;left: 193px;"></div>

    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../static/font/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/newlist.css"/>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <script type="text/javascript" src="../static/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
    <script src="../static/js/sweetalert.min-2.1.2.js" type="text/javascript"></script>
    <script type="text/javascript" src="../static/js/newlist.js"></script>
    <style type="text/css">
        video {
            object-fit: fill;
            width: 100%;
            height: 100%;
        }

        #player {
            width: 100%;
            height: 120% !important;
            border: 1px solid #000000;
            padding: 10px;
            border-radius: 10px;
            background-color: #336699;
        }

        .wenlist {
            width: calc(25% - 30px);
            height: 650px;
            padding: 30px 15px;
            border: 2px solid #E7E7E7;
            position: relative;
        }
    </style>
    <script type="text/javascript">
        var id;
        $(function () {
            $(".xj").click(function () {
                console.log(0)
                $.ajax({
                    type: "get",
                    url: "../video.do",
                    data: {
                        action: "update",
                        id: this.id
                    },
                    success: function (data) {
                        console.log(data);
                        $(".src").attr("src", <%=request.getContextPath()%>data);
                        var player = $('#player')[0];
                        player.load();
                        setTimeout(function () {
                            player.play();
                        })
                    }
                });
            });

            //动态绑定，为相关按钮绑定id
            $("body").on("click", ".insertCommentMol", function () {
                var id = $(this).val();
                var temp = $(this).parents(".facom");
                temp.attr("id", "temp");
                temp.attr("commentId", id);
                $("#submitComment").attr("data-id", $(this).attr("data-id"));
            });


            <%
            if (loginUser != null) {

                %>
            //添加大评论
            $("#insertCommentBtn").click(function () {
                var $commentContent = $("#commentContent");
                var val = $commentContent.val().trim();
                if (!val) {
                    swal("警告", "输入不能为空", "error").then(function (isOk) {
                    });
                    return;
                }
                $.ajax({
                    url: "../comment.do",
                    type: "GET",
                    data: {
                        "action": "insertComment",
                        "commentContent": val,
                        "vid": "<%=video.getId()%>",
                    },
                    success: function (data) {
                        var result = JSON.parse(data);
                        console.log(result.data)
                        var data1 = result.data;
                        if (result.code > 0) {
                            swal("提示", result.message, "success").then(function (isOk) {
                                $("#commentContainer-lg").prepend("<ol id='commentContainer' style='overflow:auto;'>\n" +
                                    "                            <li>\n" +
                                    "                                <div class='facom'>\n" +
                                    "                                    <ol style='height: 50px'>\n" +
                                    "                                        <li style='float: left ;height: 100% ;line-height: 50px;margin-left: 15px'><img\n" +
                                    "                                                style='height: 50px;width: 50px ;border-radius: 50px'\n" +
                                    "                                                src='" + data1[0] + "' alt=''></li>\n" +
                                    "                                        <li style='float: left ;height: 100% ;line-height: 50px;margin-left: 15px'>" + data1[1] +
                                    "                                        </li>\n" +
                                    "                                        <li style='float: left ;height: 100% ;line-height: 50px;margin-left: 15px'>\n" + data1[2] +
                                    "                                        </li>\n" +
                                    "                                        <li style='float: left ;height: 100% ;line-height: 50px;margin-left: 100px'>\n" +
                                    "                                            <button class='btn  btn-primary insertCommentMol' data-toggle='modal'\n" +
                                    "                                                    data-target='#editVideoItemModal' data-id='" + data1[3] + "'>评论\n" +
                                    "                                            </button>\n" +
                                    "                                        </li>\n" +
                                    "                                        <li style='float: left ;height: 100% ;line-height: 50px;margin-left: 25px'>\n" +
                                    "                                            <button class='btn-danger' id='report' data-id='" + data1[3] + "'>举报</button>\n" +
                                    "                                        </li>\n" +
                                    "                                    </ol>\n" +
                                    "                                    <p style='text-indent: 2em;margin-left: 50px;'>\n" + data1[4] +
                                    "                                    </p>\n" +
                                    "                                </div>\n" +
                                    "<div class='sonco' style='margin-left: 40px;margin-top: 5px' data-id='" + data1[3] + "'></div>" +
                                    "                            </li>\n" +
                                    "                        </ol>");
                                $commentContent.val("");
                            });
                        } else {
                            swal("警告", result.message, "error").then(function (isOk) {
                            });
                        }
                    }
                });
            });
            //添加小评论
            $("#submitComment").click(function () {
                var fid = $(this).attr("data-id");
                var commentContentMol = $("#commentContentMol").val();
                if (!commentContentMol) {
                    swal("警告", "输入不能为空", "error").then(function (isOk) {
                    });
                    return;
                }
                var $temp = $("#temp");
                $.ajax({
                    url: "../comment.do",
                    type: "GET",
                    data: {
                        "action": "insertComment",
                        "commentContent": commentContentMol,
                        "fid": fid
                    },
                    success: function (data) {
                        var result = JSON.parse(data);
                        var data1 = result.data;
                        if (result.code > 0) {
                            swal("提示", result.message, "success").then(function (isOk) {
                                $temp.after("<div class='soncom' style='margin-left: 40px;margin-top: 5px'>\n" +
                                    "                                    <ol style='height: 50px'>\n" +
                                    "                                        <li style='float: left ;height: 100% ;line-height: 50px;margin-left: 15px'><img\n" +
                                    "                                                style='height: 50px;width: 50px ;border-radius: 50px'\n" +
                                    "                                                src='" + data1[0] + "' alt=''></li>\n" +
                                    "                                        <li style='float: left ;height: 100% ;line-height: 50px;margin-left: 15px'>" + data1[1] + "\n" +
                                    "                                        </li>\n" +
                                    "                                        <li style='float: left ;height: 100% ;line-height: 50px;margin-left: 15px'>\n" +
                                    "                                            " + data1[2] + "\n" +
                                    "                                        </li>\n" +
                                    "                                    </ol>\n" +
                                    "                                    <p style='text-indent: 2em;margin-left: 50px;'>\n" +
                                    "                                        " + data1[4] + "\n" +
                                    "                                    </p>\n" +
                                    "                                </div>")
                            })
                        }
                    }
                });
            });

            //提交收藏
            $("#submitCollection").click(function () {
                var favoritesId = $("#collectionSelect").val();
                $.ajax({
                    url: "../favorites.do",
                    type: "GET",
                    data: {
                        "action": "addCollection",
                        "favoritesId": favoritesId,
                        "videoId": "<%=video.getId()%>"
                    },
                    success: function (data) {
                        console.log(data)
                        var result = JSON.parse(data);
                        if (result.code === 1) {
                            swal("提示", result.message, "success").then(function (isOk) {
                            });
                        } else {
                            swal("警告", result.message, "error").then(function (isOk) {
                            });
                        }
                    }
                });
            });
            <%}else {%>
            $("#insertCommentBtn").click(function () {
                swal("警告", "登录才能评论", "error").then(function (isOk) {});
            });
            $("#submitComment").click(function () {
                swal("警告", "登录才能评论", "error").then(function (isOk) {});
            });
            $("#submitCollection").click(function () {
                swal("警告", "登录才能收藏", "error").then(function (isOk) {});
            });
            <%}%>

            $("#addCollectionModel").click(function (event) {
                event.preventDefault();
            });


            //举报评论
            $("body").on("click", "#report", function () {
                var commentId = $(this).attr("data-id");
                $.ajax({
                    url: "../comment.do",
                    type: "GET",
                    data: {
                        action: "reportComment",
                        commentId: commentId
                    },
                    success: function (data) {
                        var result = JSON.parse(data);
                        swal("提示", result.message, "success").then(function (isOk) {
                        });
                    }
                });
            });
        });
    </script>

</head>
<body>
<%--导入导航栏--%>
<jsp:include page="header.jsp"/>
<div class="centerbox" style="margin-top:110px;margin-left: 130px;">
    <div class="container-fluid">
        <div class="leftbox" style="margin-left: 50px;padding-left:25px ">
            <h1 style=" margin-top: -30px;"><%= video.getVideoName()%>
            </h1>

            <div class="head" style="height: 500px;">

                <video id="player"  controls="controls" autoplay="autoplay">
                    <source class="src" src="<%=request.getContextPath()+videoItems.get(count).getUrl()%>"
                            type="video/mp4"/>
                </video>
            </div>
            <div style="height: 175px"></div>
            <hr>

            <button type="button" data-toggle='modal'
                    data-target='#addCollectionModel' class="btn btn-primary" data-id="-1">收藏
            </button>
            <div style="height: 5px"></div>
            <hr>
            <ul class="nav" style="margin-top: 0px">
                <li><a href="javascript:void(0)" style="line-height: 20px">在线评论</a></li>
            </ul>
            <div class="newbox"
                 style="min-height: 40px;border: 2px solid #c1c1c1;border-radius: 15px;margin-bottom: 25px;width: calc(100% - 10px);">
                <div class="row" style="margin-left: 0px">
                    <div class="row">
                        <div class="form-group">
                            <div class="col-sm-1" style="padding-left: 0px;margin-left: 30px">
                                <img src="../uploadFile/images/25.png"
                                     style="width: 50px; height: 50px;border-radius: 25px;"/>
                            </div>
                            <div class="col-sm-9" style="padding-left: 0px;height: 50px;">
                                <input type="text" class="form-control" id="commentContent" style="height: 50px;"
                                       placeholder="我要评论">
                            </div>
                            <div class="col-sm-1" style="padding-left: 0px;height: 50px;line-height: 50px;">
                                <button type="button" class="btn btn-primary" id="insertCommentBtn" data-id="-1">提交
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="commentContainer-lg" class="row" style="margin-top: 20px;margin-left: 0px;">
                        <%
                            CommentServiceImpl commentService = new CommentServiceImpl();
                            List<List<Comment>> lists = commentService.queryForListByVideoId(video.getId());

                            if (lists == null) {
                                lists = new ArrayList<>();
                            }
                            SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
                            UserServiceImpl userService = new UserServiceImpl();
                            for (int i = 0; i < lists.size(); i++) {

                                List<Comment> comments = lists.get(i);
                                Comment c = comments.get(0);
                                String date = simpleDateFormat.format(Long.valueOf(c.getCommentTime()));
                                User user = userService.queryById(c.getUserId());
                                if (user == null) {
                                    user = new User();
                                }
                        %>

                        <ol id="commentContainer" style="overflow:auto;">
                            <li>
                                <div class="facom">
                                    <ol style="height: 50px">
                                        <li style="float: left ;height: 100% ;line-height: 50px;margin-left: 15px"><img
                                                style="height: 50px;width: 50px ;border-radius: 50px"
                                                src="<%=user.getLogoUrl()%>" alt=""></li>
                                        <li style="float: left ;height: 100% ;line-height: 50px;margin-left: 15px"><%=user.getNickname()%>
                                        </li>
                                        <li style="float: left ;height: 100% ;line-height: 50px;margin-left: 15px">
                                            <%=date%>
                                        </li>
                                        <li style="float: left ;height: 100% ;line-height: 50px;margin-left: 100px">
                                            <button class='btn  btn-primary insertCommentMol' data-toggle='modal'
                                                    data-target='#editVideoItemModal' value="<%=c.getCommentId()%>"
                                                    data-id='<%=c.getCommentId()%>'>评论
                                            </button>
                                        </li>
                                        <li style="float: left ;height: 100% ;line-height: 50px;margin-left: 25px">
                                            <button class="btn-danger" id="report" data-id='<%=c.getCommentId()%>'>举报
                                            </button>
                                        </li>

                                    </ol>
                                    <p style="text-indent: 2em;margin-left: 50px;">
                                        <%=c.getCommentContent()%>
                                    </p>
                                </div>
                                <%
                                    for (int j = 1; j < comments.size(); j++) {
                                        Comment c1 = comments.get(j);
                                        User user1 = userService.queryById(c1.getUserId());
                                        if (user1 == null) {
                                            user1 = new User();
                                        }
                                %>
                                <div class="soncom" style="margin-left: 40px;margin-top: 5px">
                                    <ol style="height: 50px">
                                        <li style="float: left ;height: 100% ;line-height: 50px;margin-left: 15px"><img
                                                style="height: 50px;width: 50px ;border-radius: 50px"
                                                src="<%=user1.getLogoUrl()%>" alt=""></li>
                                        <li style="float: left ;height: 100% ;line-height: 50px;margin-left: 15px"><%=user1.getNickname()%>
                                        </li>
                                        <li style="float: left ;height: 100% ;line-height: 50px;margin-left: 15px">
                                            <%=simpleDateFormat.format(Long.valueOf(c1.getCommentTime()))%>
                                        </li>
                                    </ol>
                                    <p style="text-indent: 2em;margin-left: 50px;">
                                        <%=c1.getCommentContent()%>
                                    </p>
                                </div>
                                <%
                                    }
                                %>

                            </li>
                        </ol>

                        <%
                            }
                            User videoUser = new UserServiceImpl().queryById(video.getUserId());%>

                    </div>
                </div>
            </div>
        </div>
        <div class="rightbox" style="padding: 20px;position: relative;left: -240px!important;width: 350px;height: 57px;top: 40px;">
            <img src="<%=videoUser.getLogoUrl()%>"
                 style="width:70px;height: 70px;position: relative;top:-40px;left: 0; border-radius:50% " alt="">
            <span style="font-size: 30px;position: relative;top: -33px;left: 26px;"><%=videoUser.getNickname()%></span>
            <div class="list" style="padding: 20px;position: relative;top: -50px;left: 0; background-color: #d1c7b7;">
                <h3>视频选集</h3>
                <ul style="height: 500px;overflow: auto">
                    <%
                        for (int i = 0; i < videoItems.size(); i++) {
                            VideoItem videoItem = videoItems.get(i);
                            String url = videoItem.getUrl();
                    %>
                    <button href="<%=url%>" id="<%=videoItem.getId()%>" class="list-group-item xj">第<%=i + 1%>集 &nbsp;&nbsp;&nbsp;<%=videoItem.getName()%>
                    </button>
                    <%
                        }
                    %>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" style="top: 50px" id="editVideoItemModal" tabindex="-1" role="dialog"
     aria-labelledby="editVideoItemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="editVideoItemModalLabel">评论</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-2"></div>
                    <div class="col-md-8">
                        <div class="row">
                            <div class="form-group">
                                <label for="commentContentMol" class="col-sm-4 control-label"
                                       style="line-height: 34px;padding-right: 0px">内容</label>
                                <div class="col-sm-8" style="padding-left: 0px">
                                    <input type="text" class="form-control" id="commentContentMol"
                                           placeholder="请输入你友好的评论">
                                    <input type="hidden" id="videoIdForComment">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="submitComment" class="btn btn-primary" data-id="-1">提交</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" style="top: 50px" id="addCollectionModel" tabindex="-1" role="dialog"
     aria-labelledby="editVideoItemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="collectionTitle">收藏</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-2"></div>
                    <div class="col-md-8">
                        <div class="row">
                            <div class="form-group">


                                <label for="collectionSelect" class="col-sm-4 control-label"
                                       style="line-height: 34px;padding-right: 0px">收藏夹</label>
                                <select name="collectionSelect" id="collectionSelect">
                                    <%
                                        User user = (User) request.getSession().getAttribute("user");
                                        if (user == null) {
                                            return;
                                        }
                                        List<Favorites> favorites = new FavoritesServiceImpl().queryByUser(user.getId());
                                        for (Favorites favorite : favorites) {
                                    %>
                                    <option value="<%=favorite.getId()%>"><%=favorite.getFavoritesName()%>
                                    </option>
                                    <%
                                        }
                                    %>
                                </select>
                                <input type="hidden" name="">


                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="submitCollection" class="btn btn-primary">提交</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<%--<div style="width: 1440px;border-radius: 30px;border: 1px solid #000000; height: 734px; background-color:#CCCCCC;position: absolute;z-index:-1;top: 74px;left: 193px"></div>--%>


<jsp:include page="footer.jsp"/>
</body>
</html>
